<template>
  <div class="home">
    <my-header title="交通车任务" isRightClick="true" rightLink="/map"/>
    
    <mu-load-more @refresh="refresh" :refreshing="refreshing">
      <mu-data-table :columns="columns" :data="list" @row-click="trafficcarmap">
        <template slot-scope="scope">
          <td>{{scope.row.driver}}</td>
          <td>{{scope.row.getOnStation}}</td>
          <td class="getOff">{{scope.row.getOffStation}}</td>
          <td>{{scope.row.status}}</td>
        </template>
      </mu-data-table>
    </mu-load-more>

    <div class="btn">
        <mu-button large :disabled="isGoDisabled" color="primary" @click="carGo(0)">发车确认</mu-button>
        <mu-button large :disabled="isDoneDisabled" color="primary" @click="carGo(1)">确认完成</mu-button>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/header"
import api from "@/common/api"
export default {
  name: 'home',
  components: {
    myHeader
  },
  data () {
    return {
      isGoDisabled: true,
      isDoneDisabled: true,
      refreshing: false,
      marker: null,
      map: null,
      user: null, //用户点
      columns: [
        { title: '司机',  name: 'code' },
        { title: '上车点', name: 'quantity', align: '', width: 70},
        { title: '下车点', name: 'date',  align: '', width: 70},
        { title: '状态', name: 'status',  align: '', width: 90}
      ],
      list: [],
      requestOnce: true
    }
  },
  methods: {
    refresh () {
      // 下拉刷新
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      this.list = [];
      this.resData(localStorage.getItem("trafficcarlistid"));
    },
    trafficcarmap (index, row, event) {
      this.$router.push({name:'maps', params: {
        marks: row.location,
        flag: 1
      }});
      //this.$router.push({name:'maps', params: row.location});
    },
    carGo (flag) {
      /* 发送post请求 */
      let data = Object.assign({},this.$store.state.user,{content: {id: this.$route.params.id, action: flag}});
      if(this.requestOnce){
        this.requestOnce = false;
        this.common.reqData(api.app('trafficCarUpdate'), data, res=>{
          console.log(res);
          this.refreshing = false;
          this.requestOnce = true;
          if(res.data.status == 100){
            if(flag == 0){
              this.isGoDisabled = true,
              this.isDoneDisabled = false;
            }else if(flag == 1){
              this.isGoDisabled = true,
              this.isDoneDisabled = true;
              // 提示
              this.Toast({
                  duration: 1500,
                  mask: true,
                  message: '任务完成'
              });
            }
          }else{
            // 提示
            this.Toast({
              mask: true,
              message: res.data.msg
            });
          }
        },err =>{
          this.refreshing = false;
          this.requestOnce = true;
          console.log(err)
        });
      }
    },
    resData (id) {
      /* 发送post请求 */
      let data = Object.assign({},this.$store.state.user,{content: {id: id}});
      this.common.reqData(api.app('trafficCarDetailQuery'), data, res=>{
        console.log(res);
        if(res.data.status == 100){
          if(res.data.content.flag == '0'){
            this.isGoDisabled = false;
          }else if(res.data.content.flag == '1'){
            this.isDoneDisabled = false;
          }else if(res.data.content.flag == '2'){
            // 提示
            this.Toast({
              duration: 1500,
              mask: true,
              message: '任务完成'
            });
          }
          for(let item of res.data.content.details){
            this.list.unshift(item);
          }
        }else{
          // 提示
          this.Toast({
            mask: true,
            message: res.data.msg
          });
        }
      },err =>{
        console.log(err)
      });
    }
  },
  mounted () {
    this.resData(localStorage.getItem("trafficcarlistid"));
  },
  beforeDestroy () {
	  plus.webview.close("mapsId");
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.btn{
  position: fixed;
  bottom: 20px;
  left: 7.5%;
  right: 7.5%;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
.mu-appbar{
  height: 45px;
}
.getOff{
  color: red;
}
#mapBox{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#showMap{
  position: absolute;
  top: 45px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mu-appbar{
  position: relative;
  z-index: 999999;
}
</style>
